<template>
	<view class>
		<view class="login" @click="gotoLogin" v-if="!hasLogin">
			<view class="left">
				<text class="profileup">登录/注册</text>
				<text class="profiledown">登录后可享受更多特权</text>
			</view>
			<view class="right" >
				>
			</view>
		</view>
		<view class="user_info" v-else @click="gotoUserInfo">
			<image  mode="" :src="'http://localhost:3000/images/avatar/'+userInfo.avatar" class="avatar"></image>
			<view class="username">
				{{userInfo.username}}
			</view>
			<uni-icons type="arrowright" size="20" color="#fff"></uni-icons>
			
		</view>
		<view class="maininfo" v-if="!hasLogin">
			<view class="main-item">
				<view class="">
					<image src="../../static/images/profile/remaining.png" mode="" class=""></image>
				</view>
				<view>我的余额</view>
			</view>
			<view class="main-item">
				<view class="">
					<image src="../../static/images/profile/hongbao.png" mode=""></image>
				</view>
				<view>我的红包</view>
			</view>
			<view class="main-item">
				<view class="">
					<image src="../../static/images/profile/coins.png" mode=""></image>
				</view>
				<view>我的金币</view>
			</view>
		</view>
		
		<view class="maininfo" v-else>
			<view class="main-item">
				<view class="">
					<text class="money">{{userInfo.money}}</text>元
				</view>
				<view>我的余额</view>
			</view>
			<view class="main-item">
				<view class="">
					<text class="hongbao">0</text>个
				</view>
				<view>我的红包</view>
			</view>
			<view class="main-item">
				<view class="">
					<text class="coin">0</text>个
				</view>
				<view>我的金币</view>
			</view>
		</view>
		
		<view class="profiles">
			<view class="profileitem">
				<view class="lefticon">
					<image src="../../static/images/profile/xinyi.png" mode=""></image>
				</view>
				<view class="righttext">
					<text>我的心意卡</text>
					<uni-icons type="arrowright" size="20"></uni-icons>
				</view>
			</view>
			<view class="profileitem">
				<view class="lefticon">
					<image src="../../static/images/profile/service.png" mode=""></image>
				</view>
				<view class="righttext">
					<text>服务中心</text>
					<uni-icons type="arrowright" size="20"></uni-icons>
				</view>
			</view>
			<view class="profileitem">
				<view class="lefticon">
					<image src="../../static/images/profile/rules.png" mode=""></image>
				</view>
				<view class="righttext">
					<text>规则中心</text>
					<uni-icons type="arrowright" size="20" ></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import uniIcons from "../../components/uni-icons/uni-icons.vue"
import {mapState,mapMutations} from 'vuex'
import http from '../../api/http.js'
	export default {
		data() {
			return {
			};
		},
		components:{
			uniIcons
		},
		onLoad() {
			uni.getStorage({
				key:'userInfo',
				success:async (e)=> {
					console.log(e.data);
					// that.login(e.data);
					this.$store.commit('login',e.data);
					this.imgUrl = "http://localhost:3000/images/avatar/"+e.data.avatar;
					let res = await http.reLogin({
						username:e.data.username,
						avatar:e.data.avatar,
						money:e.data.money
					});
					console.log(res);
				}
			});
		},
		methods:{
			...mapMutations['logout','login'],
			gotoLogin(){
				uni.navigateTo({
					url:'../login/login'
				})
			},
			gotoUserInfo(){
				uni.navigateTo({
					url:'/pages/userInfo/userInfo'
				})
			}
		},
		computed:mapState(['hasLogin','userInfo','baseUrl']),
	}
</script>

<style lang="scss">
	@mixin flexcenter() {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.login{
		display: flex;
		justify-content: space-between;
		padding: 50rpx 20rpx 50rpx 45rpx;
		background: #008eff;
		width: 750rpx;
		box-sizing: border-box;
		color: #fff;
	}
	.left{
		display: flex;
		flex-direction: column;
	}
	.right{
		padding-top: 15rpx;
	}
	.profileup{
		font-size: 42rpx;
		font-weight: 700;
	}
	.profiledown{
		font-size: 28rpx;
		padding-top: 10rpx;
	}
	.maininfo{
		display: flex;
		width: 100%;
		background:#FFFFFF;
	}
	.main-item{
		flex: 1;
		display: flex;
		flex-direction: column;
		padding:30rpx 0;
		border: 1rpx solid #f2f2f2;
	}
	.main-item image{
		width: 75rpx;
		height: 75rpx;
		
	}
	.main-item view{
		width: 100%;
		text-align: center;
		font-size: 30rpx;
	}
	page{
		background: #EEEEEE;
	}
	.profiles{
		margin-top: 25rpx;
		background: #FFFFFF;
	}
	.profileitem{
		overflow: hidden;
		padding-left: 30rpx;
		padding-right: 10rpx;
		height: 100rpx;
		border-bottom: 1rpx solid #eee;
	}
	.profileitem image{
		width: 60rpx;
		height: 60rpx;
	}
	.lefticon{
		float: left;
		height: 100rpx;
		width: 100rpx;
		@include flexcenter();
	}
	.righttext{
		float: left;
		display: flex;
		justify-content: space-between;
		width: 80%;
	}
	.righttext text{
		line-height: 100rpx;
	}
	
	.user_info{
		color: #FFFFFF;
		@include flexbetween();
		align-items: center;
		padding: 50rpx 40rpx;
		background: $themeColor;
		.avatar{
			width: 116rpx;
			height: 116rpx;
			border-radius: 50%;
		}
		.username{
			flex-grow: 1;
			font-size: 50rpx;
			padding-left: 15rpx;
		}
	}
	.money{
		color: #ff9900;
	}
	.hongbao{
		color: #ff5f3e;
	}
	.coin{
		color: #6ac20b;
	}
	.money,.hongbao,.coin{
		font-size: 56rpx;
		font-weight: 700;
		padding-right: 10rpx;
		padding-bottom: 15rpx;
	}
</style>
